<script setup lang="ts">
import {onMounted, ref} from "vue";
import {devObjEstimation, devUseExtractSelected} from "devecoui-plus"

const options = ref([
  {
    "label": "植物界",
    "value": "plantae",
    "children": [
      {
        "label": "被子植物",
        "value": "angiosperms",
        "children": [
          {
            "label": "单子叶植物",
            "value": "monocots"
          },
          {
            "label": "双子叶植物",
            "value": "dicots"
          }
        ]
      },
      {
        "label": "裸子植物",
        "value": "gymnosperms",
        "children": [
          {
            "label": "松科",
            "value": "pinaceae"
          },
          {
            "label": "柏科",
            "value": "cupressaceae"
          }
        ]
      },
      {
        "label": "蕨类植物",
        "value": "ferns",
        "children": [
          {
            "label": "水龙骨科",
            "value": "polypodiaceae"
          },
          {
            "label": "蹄盖蕨科",
            "value": "dryopteridaceae"
          }
        ]
      }
    ]
  },
  {
    "label": "动物界",
    "value": "animalia",
    "children": [
      {
        "label": "哺乳动物",
        "value": "mammals",
        "children": [
          {
            "label": "食肉目",
            "value": "carnivores"
          },
          {
            "label": "偶蹄目",
            "value": "artiodactyla"
          }
        ]
      },
      {
        "label": "鸟类",
        "value": "birds",
        "children": [
          {
            "label": "猛禽",
            "value": "raptors"
          },
          {
            "label": "鸣禽",
            "value": "oscine"
          }
        ]
      },
      {
        "label": "爬行动物",
        "value": "reptiles",
        "children": [
          {
            "label": "蜥蜴",
            "value": "lizards"
          },
          {
            "label": "蛇",
            "value": "snakes"
          }
        ]
      }
    ]
  }
]);

const chooseAllData = ref([
  {
    label: '选项1',
    value: []
  },
  {
    label: '选项2',
    value: []
  },
  {
    label: '选项3',
    value: []
  }
])

const chooseLastData = ref([
  {
    label: '选项1',
    value: ''
  },
  {
    label: '选项2',
    value: ''
  },
  {
    label: '选项3',
    value: ''
  }
])

const optionsPath = ref<Record<string, any>>({})
const chooseAllValue = devUseExtractSelected(chooseAllData.value, 'value', true)
const chooseLastValue = devUseExtractSelected(chooseLastData.value, 'value', true)
onMounted(() => {
  optionsPath.value = devObjEstimation(options.value)
})
</script>

<template>

  <el-card>
    <h3>绑定所有路径的值</h3>
    <div v-for="(item,index) in chooseAllData" :key="index">
      <h4>{{ item.label }}：{{ item.value }}</h4>
      <dev-cascader-mutex v-model="item.value"
                          :props="{multiple:true}"
                          :all-select-value="chooseAllValue"
                          :options-path="optionsPath"
                          :options="options"/>
    </div>
  </el-card>

  <el-card>
    <h3>只要最后一级选中的值</h3>
    <div v-for="(item,index) in chooseLastData" :key="index">
      <h4>{{ item.label }}：{{ item.value }}</h4>
      <dev-cascader-mutex v-model="item.value"
                          :props="{multiple:true,emitPath:false}"
                          :all-select-value="chooseLastValue"
                          :options-path="optionsPath"
                          :options="options"/>
    </div>
  </el-card>
</template>
